@use 'sass:math';
@use '@angular/cdk' as cdk;

$_inner-spacing: 16px;

.docs-popup {
  box-shadow: var(--mat-sys-level2);
  color: var(--mat-sys-on-surface);
  background: var(--mat-sys-surface);
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 24px;
  max-width: 430px;
  z-index: cdk.$overlay-container-z-index + 1;
  padding: $_inner-spacing $_inner-spacing math.div($_inner-spacing, 2);
  border-radius: 8px;
}

.docs-buttons {
  display: flex;
  justify-content: flex-end;
  margin: $_inner-spacing math.div($_inner-spacing, -2) 0 0;

  .mat-mdc-button {
    text-transform: uppercase;
  }
}
